import { defaultSettings } from '@/settings'
import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'
import { STORAGE_KEYS } from '@/constants/index.js'
import { ThemeMode } from '@/enums'
import { watch } from 'vue'
import { toggleDarkMode } from '@/utils/theme'

export const useSettingsStore = defineStore('setting', () => {

  // 是否显示标签页视图
  const showTagsView = useStorage(
    STORAGE_KEYS.SHOW_TAGS_VIEW,
      defaultSettings.showTagsView
  );

  // 是否显示应用Logo
  const showAppLogo = useStorage(STORAGE_KEYS.SHOW_APP_LOGO, defaultSettings.showAppLogo);


  // 是否显示水印
  const showWatermark = useStorage(STORAGE_KEYS.SHOW_WATERMARK, defaultSettings.showWatermark)

  // 侧边栏配色方案
  const sidebarColorScheme = useStorage(
    STORAGE_KEYS.SIDEBAR_COLOR_SCHEME,
      defaultSettings.sidebarColorScheme
  );


  // 布局模式
  const layout = useStorage(STORAGE_KEYS.LAYOUT, defaultSettings.layout);

    // 主题模式（亮色/暗色）
  const theme = useStorage(STORAGE_KEYS.THEME, defaultSettings.theme);

   // 主题更新方法
  function updateTheme(newTheme) {
    theme.value = newTheme;
  }

  // 监听主题变化，自动应用样式
  watch(
    [theme],
    ([newTheme]) => {
      toggleDarkMode(newTheme === ThemeMode.DARK);
    },
    { immediate: true }
  );

  // 重置所有设置
  function resetSettings() {
    showWatermark.value = defaultSettings.showWatermark;
    layout.value = defaultSettings.layout;
    showTagsView.value = defaultSettings.showTagsView;
    showAppLogo.value = defaultSettings.showAppLogo;
  }

  return {
    showWatermark,
    showTagsView,
    showAppLogo,
    resetSettings,
    layout,
    theme,
    updateTheme,
    sidebarColorScheme
  }
})
